<template >
    <header class="app-header">
        <!--logo-->
        <a class="logo" href="#">
             <i class="iconfont Navbar_logo"></i>
        </a>
        <!--搜索-->
        <a class="search" href="#">
            <img src="@/assets/images/search.png">
        </a>
        <!--头像-->
        <a class="face" href="#">
            <img src="@/assets/images/login.png">
        </a>
        <!--下载按钮-->
        <div class="down-app" type="button">下载App</div>

    </header>
</template>

<style lang="less" scoped>
.app-header {
    display: flex;
    align-items: center;
    padding: 7px 4vw;
    background-color: #fff;

  .logo {
    flex: 1;
    .Navbar_logo {
      color: #fb7299;
      font-size: 7.46667vw;
    }
  }
    .search {
        padding: 0 0vw;

        img {
            width: 5.5vw;
        }
    }

    .face {
        padding: 0 6vw;

        img {
            width: 6.5vw;
            border-radius: 50%
        }
    }

    .down-app {
        font-size: 3vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fb7299;
        color: #fff;
        border-radius: 5px;
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        padding: 5px 12px;
    }
}
</style>